<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="circle">
			<div class="dots">
				
			</div>
		</div>
	</body>
	<style>
		body{
			margin: 0;
			padding: 0;
			background: #959595;
		}
		.circle{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			width: 50px;
			height: 50px;
			border-radius: 50%;
			background: #fff;
			box-shadow: inset 0 0 15px rgba(0, 0, 0, .5), 0 0 0 20px rgba(0, 0, 0, .5);
		}
		
		.dots{
			position: absolute;
			top: -10px;
			left: -10px;
			width: 50px;
			height: 50px;
			border-radius: 50%;
			border: 10px solid #262626;
			animation: animate 5s linear infinite;
		}
		
		.dots:before{
			content: '';
			position: absolute;
			top: -10px;
			left: calc(50% - 5px);
			width: 10px;
			height: 10px;
			border-radius: 50%;
			background: #fff;
			box-shadow: inset 0 0 10px rgba(0, 0, 0, .5),-40px 0 0 #ff0,40px 0 0 #ff0,40px 30px 0 #fff,0px -20px 0 #fff;
			animation: animate 5s linear infinite;
		}
		.dots:after{
			content: '';
			position: absolute;
			bottom: -10px;
			left: calc(50% - 5px);
			width: 10px;
			height: 10px;
			border-radius: 50%;
			background: #fff;
			box-shadow: inset 0 0 10px rgba(0, 0, 0, .5);
			box-shadow: inset 0 0 10px rgba(0, 0, 0, .5),-40px 0 0 #ff0,40px 0 0 #ff0,-40px -30px 0 #fff,0px 20px 0 #fff;
			animation: animate 5s linear infinite;
		}
		
		@keyframes animate{
			0%{
				transform: rotate(0deg);
			}
			100%{
				transform: rotate(360deg);
			}
		}
	</style>
</html>